<template lang="html">
  <div class="login">
    <v-header>
      <h1 slot="title">注册</h1>
    </v-header>
    <img src="../assets/login.png" alt="">
    <section class="loginFrom">
      <mt-field label="手机号" v-model="account">
        <button  v-show="show" @click="sendCode">发送验证码</button>
        <span v-show="!show" class="count">{{count}} s</span>
      </mt-field>
      <mt-field
        label="密码"
        placeholder="请输入密码"
        type="password"
        v-model="password"
        :readonly='!toggle'
        :disableClear='!toggle'
      ></mt-field>
      <mt-field
        label="邀请码"
        placeholder="请输入邀请码"
        type="text"
        v-model="spread_spid"
      ></mt-field>
      <mt-field
        label="验证码"
        placeholder="请输入验证码"
        type="text"
        v-model="captcha"
        :readonly='!toggle'
        :disableClear='!toggle'
      ></mt-field>
    </section>
    <mt-button
      plain
      size="large"
      class="btn"
      @click="login"
    >注册
    </mt-button>
    <!--    <router-link class="my-vip-top ho" :to="{ path: '/phoneLogin'}">-->
    <!--      <p >手机号登陆</p>-->
    <!--    </router-link>-->
    <span @click.stop='go' class="moveTo">登陆</span>
    <!--    <a href="../phoneLogin">手机号登陆</a>-->
  </div>
</template>

<script>
import Header from '@/common/_header.vue'
import {Toast} from 'mint-ui'
import {
  appLoginMobile,
  appSendCode
} from '@/http/api'

export default {
  components: {
    'v-header': Header
  },
  data() {
    return {
      account: '',
      password: '',
      toggle: !this.$store.state.login.token,
      spread_spid: '',
      show: true,
      count: '',
      timer: null,
      captcha: ''
    }
  },
  methods: {
    // 登录按钮
    async login() {
      if (this.spread_spid === '' || !this.spread_spid) {
        Toast('请输入邀请码')
        return
      }
      if (this.account !== '' && this.password !== '') {
        const params = {
          phone: this.account,
          password: this.password,
          spread_spid: this.spread_spid,
          validateCode: this.captcha
        }
        const res = await appLoginMobile(params)
        if (res.code * 1 === 200) {
          this.toggle = false;
          this.$store.commit('CHANGE_TOKEN', 1)
          localStorage.setItem('UserMessage', JSON.stringify(res.data))
          this.$router.push({
            path: '/'
          })
        } else {
          Toast('账号密码不正确');
        }
      } else {
        Toast('账号密码不能为空');
      }
      // 登录成
    },
    go() {
      this.$router.push({
        path: '/phoneLogin'
      })
    },
    async sendCode() {
      const parmas = {
        phone: this.account,
        phoneType: 1
      }
      const res = await appSendCode(parmas)
      if (res.code * 1 === 200) {
        this.getCode()
      }
      Toast(res.message)
    },

    getCode(){
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },

    //退出登录按钮
    logout() {
      Toast('退出登录成功,清除token');
      this.$store.commit('CHANGE_TOKEN', 0);
      this.toggle = true;
      this.account = '';
      this.password = '';
    }
  },
  created () {
    this.spread_spid = localStorage.getItem('shareId')
  }
}

</script>

<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';
/deep/ .mint-field-core {
  height: 40px;
}

.login {
  > section {
    .tip {
      padding: 6vw 3vw;
      color: #048AB9;
      letter-spacing: 2px;
      font-size: 16px;
    }
  }
}

img {
  width: 100%;
}

.loginFrom {
  padding: 10px;
  box-sizing: border-box;
}

.btn {
  width: 80%;
  background: #048AB9;
  color: white;
  display: block;
  margin: 20px auto 0;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  border: 0;
}

.moveTo {
  display: flex;
  margin-right: 20px;
  justify-content: flex-end;
  margin-top: 20px;
  color: #4caf50;
  position: relative;
  height: 80px;
  line-height: 80px;
}
.my-vip-top {
  margin-top: 10px;
  background-color: red;
}

.loginFrom /deep/ .mint-field-core, .loginFrom /deep/ .mint-cell-value {
  height: 40px;
}
</style>
